<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<header>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>宠爱</title>

    <!-- Favicons -->
    <link rel="shortcut icon" th:href="@{/assets/images/favicon.ico}">
    <link rel="stylesheet" th:href="@{/assets/css/vendor/vendor.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/plugins/plugins.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/style.min.css}">
    <script th:src="@{/assets/js/vendor.min.js}"></script>
    <script th:src="@{/assets/js/plugins.min.js}"></script>
    <!--Main JS-->
    <script th:src="@{/assets/js/main.js}"></script>
    <script type="text/javascript" th:src="@{/assets/js/jquery-3.2.1.slim.min.js}"></script>
    <script type="text/javascript" th:src="@{/assets/js/axios.min.js}"></script>
    <script type="text/javascript" th:src="@{/assets/js/bootstrap.js}"></script>
    <script th:src="@{/assets/js/vue.js}"></script>
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=c1a1f9a53c4110c2244ce7a5ab77e089&plugin=AMap.PlaceSearch"></script>

    <link rel="stylesheet" th:href="@{https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css}"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <style>
        .form-group > div {
            margin-bottom: 6px;
            line-height: 34px;
        }

        .form-group input {
            height: 27px;
        }

        #areaRow ul li {
            background: #FFFFFF;
        }

        #areaRow ul li:hover {
            background: #e5e6e7;
        }

        #areaRow li {
            border: 1px solid #e5e6e7;
            line-height: 30px;
            padding-left: 4px;
        }
    </style>

</header>

<body class="white-bg">
<div id="hos">
    <!-- 头部导航栏，引入公共片页面 -->
    <div class="header section" th:replace="~{common/head::head}"></div>

    <!--医院预约标题栏、搜索框-->
    <div class="section col-md-12" style="height: 70px; background-color: #f4f4f4">
        <div>
            <div class="col-lg-6" style="left: 35%;top: 10px">
                <div style="margin-top: auto;font-family: 黑体;font-size: 30px;width: 300px;float: left;color: #b2be65"
                     th:text="|&gt;&gt;${hospital.hospitalName}&lt;&lt;|"></div>
            </div>
        </div>
        <div class="input-group" style="width: 270px;float: right;top: 18px">
            <button class="btn btn-info" type="button" onclick="goBack()">【查看其他医院】</button>
        </div>
    </div>

    <!--主页面，医院详细信息-->
    <div class="section section-margin" style="background: #f3faff">
        <div class="container">
            <div class="row" style="margin: 30px auto">
                <div class="col-md-6" style="background: white">
                    <div style="margin-top: 50px;margin-left: 20px">
                        <h3>医院描述:</h3>
                        <p/>
                        <span th:text="${hospital.hospitalDescription}"></span>&nbsp;&nbsp;&nbsp;&nbsp;
                    </div>
                    <hr style="border: 4px">
                    <div style="margin-left: 20px">
                        <h3>联系我们:</h3>
                        <p/>
                        <span class="glyphicon glyphicon-phone-alt"></span>
                        <span th:text="${hospital.hospitalPhone}"></span>&nbsp;&nbsp;&nbsp;&nbsp;
                        <span class="glyphicon glyphicon-globe"></span>
                        <span th:text="${hospital.hospitalEmail}"></span>&nbsp;&nbsp;&nbsp;&nbsp;
                        <span class="glyphicon glyphicon-send"></span>
                        <span th:text="${hospital.hospitalAddress}"></span>
                        <span style="display: none" id="hId">[[${hospital}]]</span>
                    </div>
                    <hr style="border: 4px">
                </div>
                <div class="col-md-6" style="background: white">
                    <div style="margin-left: 20px">
                        <div >
                            <div class="right" style="float: left;width: 60%">
                                <div id="container" style="width: 500px;height: 500px"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--My Account Section End-->

        <!-- 底部信息栏 -->
        <footer class="section footer-section" th:replace="~{common/foot::foot}"></footer>
        <!-- Footer Section End -->
    </div>

</div>
</body>

<script type="text/javascript" th:inline="javascript">


    function goBack() {
        location = "http://localhost:9001/hospital"
    }

    var listElement = [[${hosMap}]]

    //初始化地图
    var map = new AMap.Map('container', {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom: 12, //初始地图级别
    });

    function addMarker() {
        var icon = new AMap.Icon({
            size: new AMap.Size(19, 31),
            imageSize: new AMap.Size(19, 31),

            image: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",

        });
        var markerList = [];
        marker = new AMap.Marker({
            icon: icon,
            position: [listElement.longitude, listElement.latitude],
        });
        markerList.push(marker)
        map.add(markerList);
    }

    $(function () {
        addMarker()
    })


</script>

</html>




